<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width"/>
	<meta name="format-detection" content="telephone=no" />
	<meta name="format-detection" content="email=no" />
	<meta name="format-detection" content="address=no;">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="default" />
    
    <title>实时流量&发布量</title>
    
    <link rel="stylesheet" type="text/css" href="$!{__beat.server.contextPath}/tv_track/css/stylesheets/main.css">
	
</head>
<body>
	<div class="wrap">
		<aside class="aside">
			<div class="logo-frame">
				<img src="$!{__beat.server.contextPath}/tv_track/images/58logo.png" alt="58数据产品">
			</div>
			<h3 class="title-frame">
				实时流量&发布量
			</h3>
			<div class="realtime-frame">
				<h3>实时趋势</h3>
				<div id="dataRealtime" class="animated infinite"></div>
			</div>
			<div class="release-number-frame">
				<h3>发布人数</h3>
				<div id="dataRelease"></div>
			</div>
			<div class="hotwords-frame">
				<h3>PC热词</h3>
				<div id="dataHotwords" class="">
					<div id="tagscloud" class="tagscloud">
					</div>
				</div>
			</div>
		</aside>
		
		<section class="content">
			<div class="chart-frame">
				<div style="margin:1.5rem 0 0.5rem; font-size:1.5rem; opacity: 0.8;">VPPV（详情页浏览量）</div>
				<div id="mainChart" style="height:90%;width:100%;"></div>
			</div>
			<div class="table-frame">
				<div style="margin:1rem; font-size:1.5rem; opacity: 0.8;">实时发布量</div>
				<div id="mainTable" style="/*display: flex;*/">
				</div>
			</div>
		</section>
	</div>

	<script type="text/template" id="templateRelease">
		<div id="dataReleasePrenum" class="">
			<% _.each(pdata, function(value,key){ %>
				<span class="<% value == ',' ? print('data-release-doc') : print('data-release-num')%>">
					<span class="num animated infinite <% value != ndata[key] ? print('fadeOutUp') : '' %>">
						<% print(value); %>
					</span>
				</span> 
			<% }) %>
		</div>
		<div id="dataReleaseNextnum"  class="">
			<% _.each(ndata, function(value,key){ %>
				<span class="<% value == ',' ? print('data-release-doc') : print('data-release-num')%>">
					<span class="num animated infinite <% value != pdata[key] ? print('fadeInUp') : '' %>">
						<% print(value); %>
					</span>
				</span> 
			<% }) %>
		</div>
	</script>

	<script type="text/template" id="templateTable">
		<% var tableMap = [
			{'type':'jianli', 'name':'简历'},
			{'type':'zhaopin', 'name':'招人'},
			{'type':'fangchan', 'name':'房源量'},
			{'type':'ershouche', 'name':'汽车交易'},
			{'type':'ershou', 'name':'二手买卖'},
			{'type':'huangye', 'name':'生活服务'}
		]; %>
		<% _.each(tableMap, function(value,key){ %>
			<div class="box">
				<div class="data-circle">
					<div class="title"><% print(value.name) %></div>
					<div class="data"><% print(util.numFormat(data[value.type].total)) %></div>
				</div>
				<div class="data-bar">
					<% _.each(data[value.type].data, function(v,k){ %>
						<p class="text"><% print(v.type) %>  <span><% print(util.numFormat(v.value)) %></span></p>
						<p class="bar">
							<i style="width:<% print(v.value/data[value.type].total*100) %>%;"></i>
						</p>
					<% }) %>
				</div>
			</div>
		<% }) %>
	</script>


<script src="$!{__beat.server.contextPath}/bootstrap/jquery.js"></script>
<script src="$!{__beat.server.contextPath}/echarts2/dist/echarts.js"></script>

	<script type="text/javascript">
		$(window).width() > 960 ? 
			$('html').css('font-size',$('html').width()*16/1920+'px') : $('html').css('font-size',960*16/1920+'px');
		$(window).on('resize',function(){
			$(this).width() > 960 ? $('html').css('font-size',$('html').width()*16/1920+'px') : $('html').css('font-size',960*16/1920+'px');
		})
		// require(['./js/main'],function(render){
		// 	render.init();
		// });
		
	    // 路径配置
	    require.config({paths: {echarts: "$!{__beat.server.contextPath}/echarts2/dist",dashboard: "$!{__beat.server.contextPath}/tv_track"}});

		require(["dashboard/js/main2","dashboard/js/underscore.min"],function(main){
			main.render()
		});
	</script>
</body>